<a href='https://github.com/angular/angular.js/edit/v1.5.x/src/ng/directive/ngCsp.js?message=docs(ngCsp)%3A%20describe%20your%20change...#L3' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.5.8/src/ng/directive/ngCsp.js#L3' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngCsp</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>Angular has some features that can break certain
<a href="https://developer.mozilla.org/en/Security/CSP">CSP (Content Security Policy)</a> rules.</p>
<p>If you intend to implement these rules then you must tell Angular not to use these features.</p>
<p>This is necessary when developing things like Google Chrome Extensions or Universal Windows Apps.</p>
<p>The following rules affect Angular:</p>
<ul>
<li><p><code>unsafe-eval</code>: this rule forbids apps to use <code>eval</code> or <code>Function(string)</code> generated functions
(among other things). Angular makes use of this in the <a href="api/ng/service/$parse"><code>$parse</code></a> service to provide a 30%
increase in the speed of evaluating Angular expressions.</p>
</li>
<li><p><code>unsafe-inline</code>: this rule forbids apps from inject custom styles into the document. Angular
makes use of this to include some CSS rules (e.g. <a href="api/ng/directive/ngCloak"><code>ngCloak</code></a> and <a href="api/ng/directive/ngHide"><code>ngHide</code></a>).
To make these directives work when a CSP rule is blocking inline styles, you must link to the
<code>angular-csp.css</code> in your HTML manually.</p>
</li>
</ul>
<p>If you do not provide <code>ngCsp</code> then Angular tries to autodetect if CSP is blocking unsafe-eval
and automatically deactivates this feature in the <a href="api/ng/service/$parse"><code>$parse</code></a> service. This autodetection,
however, triggers a CSP error to be logged in the console:</p>
<pre><code>Refused to evaluate a string as JavaScript because &#39;unsafe-eval&#39; is not an allowed source of
script in the following Content Security Policy directive: &quot;default-src &#39;self&#39;&quot;. Note that
&#39;script-src&#39; was not explicitly set, so &#39;default-src&#39; is used as a fallback.
</code></pre>
<p>This error is harmless but annoying. To prevent the error from showing up, put the <code>ngCsp</code>
directive on an element of the HTML document that appears before the <code>&lt;script&gt;</code> tag that loads
the <code>angular.js</code> file.</p>
<p><em>Note: This directive is only available in the <code>ng-csp</code> and <code>data-ng-csp</code> attribute form.</em></p>
<p>You can specify which of the CSP related Angular features should be deactivated by providing
a value for the <code>ng-csp</code> attribute. The options are as follows:</p>
<ul>
<li><p>no-inline-style: this stops Angular from injecting CSS styles into the DOM</p>
</li>
<li><p>no-unsafe-eval: this stops Angular from optimizing $parse with unsafe eval of strings</p>
</li>
</ul>
<p>You can use these values in the following combinations:</p>
<ul>
<li><p>No declaration means that Angular will assume that you can do inline styles, but it will do
a runtime check for unsafe-eval. E.g. <code>&lt;body&gt;</code>. This is backwardly compatible with previous versions
of Angular.</p>
</li>
<li><p>A simple <code>ng-csp</code> (or <code>data-ng-csp</code>) attribute will tell Angular to deactivate both inline
styles and unsafe eval. E.g. <code>&lt;body ng-csp&gt;</code>. This is backwardly compatible with previous versions
of Angular.</p>
</li>
<li><p>Specifying only <code>no-unsafe-eval</code> tells Angular that we must not use eval, but that we can inject
inline styles. E.g. <code>&lt;body ng-csp=&quot;no-unsafe-eval&quot;&gt;</code>.</p>
</li>
<li><p>Specifying only <code>no-inline-style</code> tells Angular that we must not inject styles, but that we can
run eval - no automatic check for unsafe eval will occur. E.g. <code>&lt;body ng-csp=&quot;no-inline-style&quot;&gt;</code></p>
</li>
<li><p>Specifying both <code>no-unsafe-eval</code> and <code>no-inline-style</code> tells Angular that we must not inject
styles nor use eval, which is the same as an empty: ng-csp.
E.g.<code>&lt;body ng-csp=&quot;no-inline-style;no-unsafe-eval&quot;&gt;</code></p>
</li>
</ul>

</div>






<div>
  

  
  <h2>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 0.</li>
    
  </ul>

  
  <h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    
      <li>as element:
      (This directive can be used as custom element, but be aware of <a href="guide/ie">IE restrictions</a>).
      <pre><code>&lt;ng-csp&gt;&#10;...&#10;&lt;/ng-csp&gt;</code></pre>
      </li>
    <li>as attribute:
        <pre><code>&lt;html&gt;&#10;...&#10;&lt;/html&gt;</code></pre>
      </li>
    
  </div>
  
  


  
  <h2 id="example">Example</h2><p>This example shows how to apply the <code>ngCsp</code> directive to the <code>html</code> tag.</p>
<pre><code class="lang-html">&lt;!doctype html&gt;
&lt;html ng-app ng-csp&gt;
...
...
&lt;/html&gt;
</code></pre>
<p>// Note: the suffix <code>.csp</code> in the example name triggers
      // csp mode in our http server!
      

<div>
  <plnkr-opener example-path="examples/example-example.csp"></plnkr-opener>

  <div class="runnable-example"
      path="examples/example-example.csp"
      name="example.csp"
      module="cspExample"
      ng-csp="true">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;div ng-controller=&quot;MainController as ctrl&quot;&gt;&#10;  &lt;div&gt;&#10;    &lt;button ng-click=&quot;ctrl.inc()&quot; id=&quot;inc&quot;&gt;Increment&lt;/button&gt;&#10;    &lt;span id=&quot;counter&quot;&gt;&#10;      {{ctrl.counter}}&#10;    &lt;/span&gt;&#10;  &lt;/div&gt;&#10;&#10;  &lt;div&gt;&#10;    &lt;button ng-click=&quot;ctrl.evil()&quot; id=&quot;evil&quot;&gt;Evil&lt;/button&gt;&#10;    &lt;span id=&quot;evilError&quot;&gt;&#10;      {{ctrl.evilError}}&#10;    &lt;/span&gt;&#10;  &lt;/div&gt;&#10;&lt;/div&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="script.js"
      language="js"
      type="js">
      <pre><code>angular.module(&#39;cspExample&#39;, [])&#10;.controller(&#39;MainController&#39;, function() {&#10;   this.counter = 0;&#10;   this.inc = function() {&#10;     this.counter++;&#10;   };&#10;   this.evil = function() {&#10;     // jshint evil:true&#10;     try {&#10;       eval(&#39;1+2&#39;);&#10;     } catch (e) {&#10;       this.evilError = e.message;&#10;     }&#10;   };&#10; });</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>var util, webdriver;&#10;&#10;var incBtn = element(by.id(&#39;inc&#39;));&#10;var counter = element(by.id(&#39;counter&#39;));&#10;var evilBtn = element(by.id(&#39;evil&#39;));&#10;var evilError = element(by.id(&#39;evilError&#39;));&#10;&#10;function getAndClearSevereErrors() {&#10;  return browser.manage().logs().get(&#39;browser&#39;).then(function(browserLog) {&#10;    return browserLog.filter(function(logEntry) {&#10;      return logEntry.level.value &gt; webdriver.logging.Level.WARNING.value;&#10;    });&#10;  });&#10;}&#10;&#10;function clearErrors() {&#10;  getAndClearSevereErrors();&#10;}&#10;&#10;function expectNoErrors() {&#10;  getAndClearSevereErrors().then(function(filteredLog) {&#10;    expect(filteredLog.length).toEqual(0);&#10;    if (filteredLog.length) {&#10;      console.log(&#39;browser console errors: &#39; + util.inspect(filteredLog));&#10;    }&#10;  });&#10;}&#10;&#10;function expectError(regex) {&#10;  getAndClearSevereErrors().then(function(filteredLog) {&#10;    var found = false;&#10;    filteredLog.forEach(function(log) {&#10;      if (log.message.match(regex)) {&#10;        found = true;&#10;      }&#10;    });&#10;    if (!found) {&#10;      throw new Error(&#39;expected an error that matches &#39; + regex);&#10;    }&#10;  });&#10;}&#10;&#10;beforeEach(function() {&#10;  util = require(&#39;util&#39;);&#10;  webdriver = require(&#39;protractor/node_modules/selenium-webdriver&#39;);&#10;});&#10;&#10;// For now, we only test on Chrome,&#10;// as Safari does not load the page with Protractor&#39;s injected scripts,&#10;// and Firefox webdriver always disables content security policy (#6358)&#10;if (browser.params.browser !== &#39;chrome&#39;) {&#10;  return;&#10;}&#10;&#10;it(&#39;should not report errors when the page is loaded&#39;, function() {&#10;  // clear errors so we are not dependent on previous tests&#10;  clearErrors();&#10;  // Need to reload the page as the page is already loaded when&#10;  // we come here&#10;  browser.driver.getCurrentUrl().then(function(url) {&#10;    browser.get(url);&#10;  });&#10;  expectNoErrors();&#10;});&#10;&#10;it(&#39;should evaluate expressions&#39;, function() {&#10;  expect(counter.getText()).toEqual(&#39;0&#39;);&#10;  incBtn.click();&#10;  expect(counter.getText()).toEqual(&#39;1&#39;);&#10;  expectNoErrors();&#10;});&#10;&#10;it(&#39;should throw and report an error when using &quot;eval&quot;&#39;, function() {&#10;  evilBtn.click();&#10;  expect(evilError.getText()).toMatch(/Content Security Policy/);&#10;  expectError(/Content Security Policy/);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example.csp/index.html" name="example-example.csp"></iframe>
  </div>
</div>


</p>

</div>


